<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
<!--        <button v-on:click="count++">You clicked me {{ count }} times.这是一个组件内容</button>-->
<!--        <button v-on:click="count++">You clicked me {{ count }} times.这是一个组件内容</button>-->
        <btn-counter></btn-counter>
        <btn-counter></btn-counter>
        <btn></btn>
        <com-a></com-a>
    </div>
<script src="../js/vue.js"></script>
<script>
    //注册全局组件
    Vue.component("btn-counter", {
        data() {
            return {
                count: 1
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    });
    Vue.component("btn", {
        data() {
            return {
                count: 1
            }
        },
        // template: '<div><btn-counter></btn-counter><com-a></com-a></div>'//不认识局部注册的组件com-a
        template: '<div><btn-counter></btn-counter></div>'
    });
    let app = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        components: {
            "com-a": {
                template: "<div><span>这是组件a</span><btn></btn></div>"
            }
        }
    })
</script>
</body>
</html>